<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动float规则二：不能与行内级元素层叠</title>
  </head>
  <style>
    /* 
    float规则:浮动
      1.- 元素一旦浮动后
          - 脱离标准流
          - 朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止
      2.浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出
          - 比如行内级元素、inline-block元素、块级元素的文字内容
    */
    .content {
      height: 300px;
      background-color: pink;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: purple;
      display: inline-block;
    }

    a {
      background-color: red;
    }

    strong {
      float: left;
      background-color: yellowgreen;
    }

    span {
      /* float: left; */
      background-color: green;
    }
  </style>

  <body>
    <div class="content">
      content盒子里的文字
      <div class='box'>div盒子</div>
      <a href="">a元素</a>
      <strong>strong元素</strong>
      <span>span元素</span>
    </div>
  </body>

</html>